<template>
	<view class="container">
		<view class="content">
			<view class="box" v-for="(item,index) in data.list" :key="index">
				<view class="title">
					<text>*</text>规格{{index+1}}
				</view>
				<view class="list">
					<view class="item" v-for="(items,indexs) in item.attr" :key="indexs">
						<view class="attr">
							{{items.attr}}
						</view>
						<view class="val">
							{{items.val}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<input placeholder="价格" type="number" v-model="item.price">
					<input placeholder="库存" type="number" v-model="item.stock">
				</view>
				<view class="bottom">
<!--					<input placeholder="PV值" type="number" v-model="item.pv">-->
					<input placeholder="供货价" type="number" v-model="item.supply">
				</view>
				<uni-icons class="del" @click="del(index)" type="trash" size="15" color="#999"></uni-icons>
			</view>
		</view>
		<view class="footers">

		</view>
		<view class="footer">
			<view class="left" @click="back">
				上一步
			</view>
			<view class="right" @click="backs">
				保存
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
const {proxy} = getCurrentInstance();
	const data = reactive({
		list: [],
		result: [],
		results: []
	})
	onLoad((option) => {

		doExchange(JSON.parse(option.data), 0);

	})
	onShow(() => {




	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		// console.log('onReachBottom')
	})


	function doExchange(arr, index) {
		console.log(arr)
		for (var i = 0; i < arr[index].attr.length; i++) {
			data.result[index] = arr[index].attrs + '=' + arr[index].attr[i].val;
			if (index != arr.length - 1) {
				doExchange(arr, index + 1)
			} else {
				data.results.push(data.result.join(','))
			}
		}
		let arrs = data.results.map(item => {
			let datas = []
			item.split(',').forEach((items, index) => {
				let attrs = items.split('=')
				datas[index] = []
				datas[index].push({
					attr: attrs[0],
					val: attrs[1]
				})
			})
			return datas
		})
		data.list = arrs.map(item => { //构造
			return {
				attr: item.map(items => {
					return items[0]
				}),
				price: '',
				coupon: 0,
				pv:0,
				supply:'',
				stock: '',
				img: ''
			}
		})
		console.log(data.list); //
	}


	function del(index) {
		data.list.splice(index, 1)
	}
	// 规格排列组合
	function getCombination(array) {
		let resultArry = []
		console.log(array.length, "array.length")
		let emptyVal = []

		let lengths = 1
		array.forEach((item, index) => {
			lengths = lengths * item.attr.length
		})
		if (lengths <= 1) {
			resultArry = [
				[]
			]
			array.forEach(item => {
				resultArry[0].push(item.attr[0])
			})
			console.log(resultArry, "resultArry")
			return resultArry
		} else {
			array.forEach((prev, cur) => {
				emptyVal[cur] = []
				console.log(prev, "prev")
				prev.attr.forEach(val => {
					for (let i = 0; i <= cur; i++) {
						array.forEach(items => {
							emptyVal[cur].push({
								val: val.val,
								attr: prev.attrs
							})
						})

					}
				})
			})
			console.log(emptyVal, 'emptyVal')
			return emptyVal
			// array.forEach((arrItem) => {
			// 	if (resultArry.length <1) {
			// 		console.log(arrItem.attr)
			// 		resultArry =arrItem.attr
			// 	} else {
			// 		const emptyArray = [];
			// 		resultArry.forEach((item) => {
			// 			arrItem.attr.forEach((value) => {
			// 				console.log(Array.isArray(item))
			// 				if (Array.isArray(item)) {
			// 					emptyArray.push([{val:item.val,attr:item.attr},{val:value.val,attr:value.attr}])
			// 				} else {
			// 					emptyArray.push([{val:item.val,attr:item.attr}, {val:value.val,attr:value.attr}])
			// 				}
			// 			})
			// 		})
			// 		resultArry = emptyArray
			// 	}
			// })
		}
	}

	function back() {
		uni.navigateBack()
	}

	function backs() {
		let list = []
		data.list.forEach(item => {
			list.push({
				attr: item.attr,
				coupon: 0,
				img: '',
				price: Number(item.price),
				stock: Number(item.stock),
				pv: Number(item.pv),
				supply: Number(item.supply),
			})
		})

		uni.setStorageSync('attributelist', list) //保存
		uni.navigateBack({
			delta: 2
		})
	}

	function shopClassList() {
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999`,
			method: 'get',
			success(res) {}
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30upx;

		.content {
			.box {
				background-color: #fff;
				padding: 20upx;
				border-radius: 20upx;
				margin-bottom: 30upx;
				position: relative;

				.del {
					position: absolute;
					top: 30upx;
					right: 30upx;
				}

				.title {
					display: flex;
					font-size: 28upx;
					font-weight: bold;
					margin-top: 20upx;

					text {
						color: $color1;
						font-size: 36upx;
					}
				}

				.list {
					display: flex;
					flex-wrap: wrap;

					.item {
						margin-top: 20upx;
						margin-right: 20upx;

						.attr {
							font-size: 28upx;
						}

						.val {
							margin-top: 20upx;
							color: $color1;
							font-size: 28upx;
							border: 1upx solid $color1;
							padding: 10upx 30upx;
							border-radius: 40upx;
						}
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					margin-top: 20upx;

					input {
						background-color: #f5f5f5;
						width: 40%;
						padding: 20upx 20upx;
						font-size: 28upx;
						border-radius: 10upx;
					}
				}
			}
		}

		.footers {
			height: 120upx;
		}

		.footer {
			width: calc(100% - 40upx);
			background-color: #fff;
			padding: 20upx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			text-align: center;
			align-items: center;
			justify-content: space-between;

			.left {
				width: 20%;
				color: $color1;
			}

			.right {
				width: 70%;
				background-color: $color1;
				color: #fff;
				padding: 20upx;
				border-radius: 40upx;
			}
		}
	}
</style>
